<template>
  <el-dialog
    title="删除作品"
    :visible.sync="visible"
    width="580px"
    :before-close="handleClose"
  >
    <div class="removeBox">
      <div class="info"><span>您确定要删除该作品？</span>如果是，请获取手机验证码。</div>
    <el-form  :model="removeForm" :hide-required-asterisk="true" label-position="top" :rules="removeRules" ref="removeForm"  label-width="0">

      <el-form-item prop="captcha" >
        <div class="captcha-container">
          <el-input
            v-model="removeForm.captcha"
            placeholder="请输入图形验证码"
            clearable
            class="custom-input"
          />
          <img
            :src="captchaImage"
            alt="验证码"
            @click="refreshCaptcha"
            class="captcha-image"
          />
        </div>
      </el-form-item>
      <el-form-item >
        <div class="sms-container">
        <el-input
          v-model="userPhone"
          disabled
          readonly
          clearable
          class="custom-input"
        />
          <el-button
            type="text"
            @click="sendSmsCode"
            :disabled="smsCountdown > 0"
            class="sms-button"
          >
            {{ smsCountdown > 0 ? `${smsCountdown}s后重新获取` : '获取手机验证码' }}
          </el-button>
        </div>
      </el-form-item>
      <el-form-item  prop="smsCode">
          <el-input
            v-model="removeForm.smsCode"
            placeholder="请输入手机验证码"
            clearable
            class="custom-input"
          />
      </el-form-item>
    </el-form>
    </div>
    <div class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import store from "@/store";
import { deleteCreation,sendDeleteVerifyCode } from "@/api/work";
import {getCodeImg, getSmsCode} from "@/api/login";

export default {
  props: {
    visible: Boolean,
    deleteId:String,
  },
  data() {
    return {
      userPhone:store.getters.phone,
      codeUrl: "",
      removeForm: {
        phone: '',
        captcha: '',
        smsCode: '',
        password: '',
        confirmPassword: ''
      },
      removeRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
        ],
        smsCode: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }]
      },
      loading: false,
      captchaImage: '',
      captchaId:'',
      smsCountdown:0
    };
  },
  mounted() {
    this.refreshCaptcha();
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleDocumentClick);
  },
  methods: {
    refreshCaptcha() {
      getCodeImg().then(res => {
        this.captchaImage = "data:image/gif;base64," + res.captcha_image;
        this.captchaId = res.captcha_id;
      });
    },
    async sendSmsCode(){
      let that=this;

      if (!this.userPhone || !this.removeForm.captcha) {
        this.$modal.msgError('请先填写手机号和图形验证码');
        return false
      }
    try {
      let smsRes = await sendDeleteVerifyCode({
        captcha_id: that.captchaId,
        captcha_value: that.removeForm.captcha,
      });
      this.$modal.msgSuccess( "验证码发送成功请注意查收！");

      that.smsCountdown = 60;
      var interval = setInterval(() => {
          if (that.smsCountdown > 0) {
            that.smsCountdown=that.smsCountdown-1;
          } else {
            clearInterval(interval);
          }
        }, 1000);
      } catch (error) {
        this.refreshCaptcha()
        this.$message.error(error);
      }


    },
    submitForm() {
      this.$refs.removeForm.validate(valid => {
        if (valid) {
          this.loading = true;
          deleteCreation({
            creation_id: this.deleteId,
            verify_code: this.removeForm.smsCode}).then(res => {
            this.$message.success('作品删除成功');
            this.$emit('submit', true);
            this.handleClose();
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.refreshCaptcha();
            }
          })
        }
      });
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
  },
};
</script>

<style scoped>
.el-select {
  width: 100%;
}

.removeBox {
  width: 420px;
  margin: 0 auto;
  .info{
    font-size: 18px;
    color: rgba(0, 1, 27, 1);
    line-height: 21px;
    text-align: center;
    margin-bottom: 25px;
    span{
      color:rgba(236, 17, 17, 1)
    }
  }
  .el-form-item__label{
    font-size: 14px;
    color: #00011B;
    line-height: 16px;
    margin-bottom: 4px;
    font-weight: normal;
    padding: 0;
  }
  .el-form-item{
    margin-bottom: 24px;
  }
  .el-input {
    height: 48px !important;
    line-height: 48px !important;
    input {
      height: 48px;
      line-height: 48px !important;
      font-size: 16px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }

}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.custom-input {
  width: 100%;
  height: 45px;
  font-size: 16px;
  box-sizing: border-box; /* 防止样式溢出 */
}

.captcha-container {
  display: flex;
  align-items: center;
}

.captcha-image {
  width: 148px;
  height: 48px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 12px;
  border:1px solid #F1F1F1;
}

.sms-container {
  display: flex;
  align-items: center;
}

.sms-button {
  position: absolute;
  color:rgba(22, 93, 235, 1);
  font-size: 16px;
  line-height: 22px;
  padding: 0;
  border-radius: 0;
  right: 16px;
  border-bottom: 1px solid #165deb;
}

.custom-button {
  width: 100%;
  margin-top: 20px;
  height: 45px;
  font-size: 16px;
}

.footer {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.title {
  margin: 0px auto 48px auto;
  text-align: center;
  font-size: 32px;
  color: #000000;
  line-height: 38px;

  span{
    color: #FF7300;
    font-weight: bold;
    margin-left: 8px;
  }
}
</style>
